<template>
	<view class="pb-safe fixed inset-x-0 bottom-0 z-10 bg-color-1">
		<view class="h-tab-bar flex flex-row items-stretch border b-active">
			<view
				class="flex-center flex-1"
				v-for="(item, index) in data"
				:key="item.iconPath"
				@click="change(item)"
				:class="[index === current ? 'bg-color-2' : 'bg-color-1', index === data.length - 1 ? '' : 'border-r b-active']"
			>
				<text class="text-l color-main">{{ item.text }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { ref, onMounted, getCurrentInstance } from 'vue';
export default {
	name: 'TabBar',
	props: {
		current: Number,
	},
	setup(props, ctx) {
		const { ctx: _ctx } = getCurrentInstance();
		const data = [
			{
				pagePath: '/pages/home/first/first',
				text: '首页',
			},
			{
				pagePath: '/pages/home/category/category',
				text: '分类',
			},
			{
				pagePath: '/pages/home/shopping-bag/shopping-bag',
				text: '购物袋',
			},
			{
				pagePath: '/pages/home/me/me',
				text: '我的',
			},
		];
		function change(item) {
			if (item.isNavigate) {
				uni.navigateTo({
					url: item.pagePath,
				});
			} else {
				uni.switchTab({
					url: item.pagePath,
				});
			}
		}
		onMounted(() => {
			uni
				.createSelectorQuery()
				.in(_ctx)
				.select('.pb-safe')
				.boundingClientRect((data) => {
					if (data) {
						ctx.emit('load', { height: data.height });
					}
				})
				.exec();
		});
		return {
			data,
			change,
		};
	},
};
</script>

<style></style>